<template>
  <div>
    <el-dialog
      :title="title_name"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="dialogVisible"
      width="58%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-width="120px"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item label="公司名称" prop="name">
            <el-input placeholder="公司名称" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-cascader
              v-model="ruleForm.setUPvalue"
              placeholder="选择发货地址"
              :options="AddressBase"
              :props="{
                value: 'id',
                label: 'name',
                children: 'next_level_data',
              }"
            ></el-cascader>
            <el-input
              placeholder="公司详细地址"
              v-model="ruleForm.address"
              style="width: 208px"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="公司电话">
            <el-input
              placeholder="公司电话"
              v-model="ruleForm.contact_phone"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人姓名">
            <el-input
              placeholder="负责人姓名"
              v-model="ruleForm.contact_name"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人电话">
            <el-input
              placeholder="负责人电话"
              v-model="ruleForm.contact_mobile"
            ></el-input>
          </el-form-item>
          <el-form-item label="营业执照">
            <el-upload
              class="upload-demo"
              ref="add-upload"
              action
              multiple
              :auto-upload="false"
              :file-list="ruleForm.business_license"
              :on-change="
                (file, fileList) => {
                  handleChange(file, fileList, 0);
                }
              "
              :on-remove="
                (file, fileList) => {
                  removeChange(file, fileList, 0);
                }
              "
            >
              <el-button
                slot="trigger"
                size="small"
                icon="el-icon-upload2"
                style="width: 172px"
              >
                上传文件</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="道路运输许可证">
            <el-upload
              class="upload-demo"
              ref="add-upload"
              action
              multiple
              :auto-upload="false"
              :file-list="ruleForm.road_transport_permit"
              :on-change="
                (file, fileList) => {
                  handleChange(file, fileList, 1);
                }
              "
              :on-remove="
                (file, fileList) => {
                  removeChange(file, fileList, 1);
                }
              "
              name="道路运输许可证"
            >
              <el-button
                slot="trigger"
                size="small"
                icon="el-icon-upload2"
                style="width: 172px"
              >
                上传文件</el-button
              >
            </el-upload>
          </el-form-item>

          <el-form-item label="审计记录表">
            <el-upload
              class="upload-demo"
              ref="add-upload"
              action
              multiple
              :auto-upload="false"
              :file-list="ruleForm.audit_record"
              :on-change="
                (file, fileList) => {
                  handleChange(file, fileList, 2);
                }
              "
              :on-remove="
                (file, fileList) => {
                  removeChange(file, fileList, 2);
                }
              "
              name="审计记录表"
            >
              <el-button
                slot="trigger"
                size="small"
                icon="el-icon-upload2"
                style="width: 172px"
              >
                上传文件</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="审计报告">
            <el-upload
              class="upload-demo"
              ref="add-upload"
              action
              multiple
              :auto-upload="false"
              :file-list="ruleForm.audit_report"
              :on-change="
                (file, fileList) => {
                  handleChange(file, fileList, 3);
                }
              "
              :on-remove="
                (file, fileList) => {
                  removeChange(file, fileList, 3);
                }
              "
              name="审计报告"
            >
              <el-button
                slot="trigger"
                size="small"
                icon="el-icon-upload2"
                style="width: 172px"
              >
                上传文件</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="所属组织" prop="branch_id">
            <el-select
              clearable
              multiple
              v-model="ruleForm.branch_id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in originList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="承运商编码" prop="coding">
            <el-input
              placeholder="承运商编码"
              v-model="ruleForm.coding"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="承运商类型" prop="coding">
                        <el-select v-model="ruleForm.carrier_type" placeholder="请选择" style="width: 172px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
          <el-form-item label="描述">
            <el-input placeholder="描述" v-model="ruleForm.remark" ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          :data-tracker="orderstate == '0' ? 'P24-8' : 'P24-10'"
          @click="cancledata()"
          >取 消</el-button
        >
        <!-- 代表创建的确定 -->
        <el-button
          type="primary"
          data-tracker="P24-7"
          @click="PageAddAccept('ruleForm')"
          v-if="orderstate == '0'"
          >确 定
        </el-button>
        <!-- 修改的确定 -->
        <el-button
          type="primary"
          data-tracker="P24-9"
          @click="PageEditAccept('ruleForm')"
          v-if="orderstate == '2'"
          >确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  Acceptlist,
  AddAccept,
  EditAccept,
  DetailsAccept,
  deleteAccept,
} from "@/api/information";
import {
  uploading,
  PagewebsiteList,
  regionList,
  dictionanry,
} from "@/page/material/common/common";
export default {
  props: ["dialogVisible","diaremarklist"],
  data() {
    return {
      title_name: "承运商",
      inputname: "", //输入公司名称
      queryvalue: [], //公司地址
      detailvalue: "", //公司详细地址
      AddressBase: [], //地址库接口
      originList: [], //组织
      queryparam: {
        name: "", //姓名
        province_id: 0, //省id
        city_id: 0, //市ID
        district_id: 0, //区ID
        Address: "", //详细地址
        page: 1,
        page_size: 10,
      }, //发货方搜索接口
      // 分页功能
      total: 0, //总条数
      currentPage4: 1,
      deletparam: {
        id: [], //多选删的id
      },
      ruleForm: {
        name: "", // 名称 必传
        contact_name: "", //负责人姓名
        contact_mobile: "", //负责人手机
        contact_phone: "", //公司电话电话
        coding: "", //承运商编码  必传
        business_license: [], //营业执照
        road_transport_permit: [], //道路运输许可证
        audit_report: [], //审计报告
        audit_record: [], //审计记录表
        setUPvalue: [], //地址
        carrier_type: "1", //类型：0自营，1其他    必传
        address: "", //详细地址
        branch_id: "", //网点id ，类型为自营时 必填
        remark: "", //描述信息
      },
      rules: {
        name: [{ required: true, message: "请填写公司名称", trigger: "blur" }],
        coding: [
          { required: true, message: "请输入承运商编码", trigger: "blur" },
        ],
        carrier_type: [
          { required: true, message: "请输入承运商类型", trigger: "blur" },
        ],
        branch_id: [{ required: true, message: "请输入网点", trigger: "blur" }],
        // contact_phone: [
        //   {
        //     required: true,
        //     pattern:
        //       /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
        //     message: "请输入正确的手机号",
        //     trigger: "blur",
        //   },
        // ],
      },
      tableData: [],
      orderstate: "0", //新增状态0 编辑状态2
      // dialogVisible: false, //判断弹框显示隐藏
      consignerID: "", //发货人的ID
      options: [],
      // maxheight:400,
      disabless:false,
    };
  },
  components: {},
  mounted() {
    // 获取承运商列表
    this.PageAcceptlist();
    // 获取地址库接口
    this.provincectiy();
    // 获取组织接口
    this.siteList();
    // 数据字典
    this.dicList();
    // this.$nextTick(()=>{
    //   this.maxheight=document.body.clientHeight-this.$refs.carriermultipleTable.$el.offsetTop-55
    // })
    // if(this.diaremarklist == 1) {
    //   this.ruleForm.remark = "返箱承运商"
    //   this.disabless = true
    // }else {
    //   this.ruleForm.remark = ""
    //   this.disabless = false
    // }
  },
  methods: {
    // 数据字典
    dicList() {
      //承运商类型
      dictionanry("carrier_type").then((res) => {
        var res = res.data;
        res.list.forEach((item, i) => {
          res.list[i] = { value: item.item_code, label: item.item_name };
        });
        this.options = res.list;
      });
    },
    // 组织管理页面
    siteList() {
      PagewebsiteList("0").then((res) => {
        var res = res.data;
        for (var j = 0; j < res.length; j++) {
          this.originList.push({
            value: res[j].id,
            label: res[j].name,
          });
        }
      });
    },
    // 地址库
    provincectiy() {
      regionList(0).then((res) => {
        this.AddressBase = res.data;
      });
    },
    // 一页有多少条
    handleSizeChange(val) {
      this.queryparam.page_size = val;
      //  数据列表接口
      this.PageAcceptlist();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.queryparam.page = val;
      //  数据列表接口
      this.PageAcceptlist();
    },
    // 点击关闭需要调用的函数
    handleClose() {
      this.closepop();
      this.Empty_data();
    },
    // 承运方列表
    PageAcceptlist() {
      if (this.queryvalue != "") {
        this.queryparam.province_id = this.queryvalue[0];
        this.queryparam.city_id = this.queryvalue[1];
        this.queryparam.district_id = this.queryvalue[2];
      } else {
        this.queryparam.province_id = 0;
        this.queryparam.city_id = 0;
        this.queryparam.district_id = 0;
      }
      this.queryparam.name = this.inputname; //名字
      this.queryparam.Address = this.detailvalue; //详细地址
      Acceptlist(this.queryparam).then((res) => {
        this.total = res.data.pagination.total;
        if (res.data.list == null) {
          var list = [];
          this.DataState(list);
        } else {
          this.DataState(res.data.list);
        }
      });
    },
    // 处理列表的数据
    DataState(res) {
      var nametable = [];
      for (var i = 0; i < res.length; i++) {
        let branch_name_list = [];
        if (res[i].branch_info != null) {
          for (var j = 0; j < res[i].branch_info.length; j++) {
            branch_name_list.push(res[i].branch_info[j].branch_name + "/");
          }
        }
        var type = res[i].carrier_type === "0" ? "自营承运商" : "物流承运商";
        nametable.push({
          id: res[i].id,
          name: res[i].name, //公司名字
          contact_name: res[i].mobile, //负责人名字
          contact_mobile: res[i].contact_mobile, //负责人手机号
          contact_phone: res[i].contact_phone, //公司电话
          coding: res[i].coding, //承运商编码
          business_license: res[i].business_license, //营业执照
          road_transport_permit: res[i].road_transport_permit, //道路运输许可证
          audit_report: res[i].audit_report, //审计报告
          audit_record: res[i].audit_record, //审计记录表
          carrier_type: type, //类型
          province:
            res[i].province_name +
            "/" +
            res[i].city_name +
            "/" +
            res[i].district_name +
            "/" +
            res[i].address,
          remark: res[i].remark, //描述信息
          branch_name: branch_name_list, //网点名字
        });
      }
      this.tableData = nametable;
    },
    // 创建承运方
    PageAddAccept(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 营业执照
          var license =
            this.ruleForm.business_license.length == 0
              ? ""
              : this.ruleForm.business_license[0].name;

          var permit =
            this.ruleForm.road_transport_permit.length == 0
              ? ""
              : this.ruleForm.road_transport_permit[0].name;

          var record = [];
          if (this.ruleForm.audit_record.length == 0) {
            record = [];
          } else {
            for (var i = 0; i < this.ruleForm.audit_record.length; i++) {
              record.push(this.ruleForm.audit_record[i].name);
            }
          }
          var report = [];
          if (this.ruleForm.audit_report.length == 0) {
            report = [];
          } else {
            for (var i = 0; i < this.ruleForm.audit_report.length; i++) {
              report.push(this.ruleForm.audit_report[i].name);
            }
          }
          var parme = {
            name: this.ruleForm.name, //名称 必传
            contact_name: this.ruleForm.contact_name, //负责人姓名
            contact_mobile: this.ruleForm.contact_mobile, //负责人手机
            contact_phone: this.ruleForm.contact_phone, //电话
            coding: this.ruleForm.coding, // 承运商编码  必传
            business_license: license, // 营业执照
            road_transport_permit: permit, // 道路运输许可证
            audit_report: report, // 审计报告
            audit_record: record, //审计记录表
            province_id: this.ruleForm.setUPvalue[0], //省id
            city_id: this.ruleForm.setUPvalue[1], //市id
            district_id: this.ruleForm.setUPvalue[2], //区id
            carrier_type: this.ruleForm.carrier_type, //类型：0自营，1其他    必传
            address: this.ruleForm.address, //详细地址
            branch_id: this.ruleForm.branch_id, //网点id ，类型为自营时 必填
            remark: this.ruleForm.remark, //描述信息
            carrier_node_type:this.diaremarklist + "",//1 揽收 2 干线 3 配送 4 回单 5 回箱
          };
          AddAccept(parme).then((res) => {
            if (res.code == 10000) {
              this.$message({
                message: "创建成功",
                type: "success",
              });
              this.$emit("ok");
              // this.message();
              this.closepop();
              // this.PageAcceptlist();
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 编辑承运方
    PageEditAccept(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var license =
            this.ruleForm.business_license.length == 0
              ? ""
              : this.ruleForm.business_license[0].name;
          var permit =
            this.ruleForm.road_transport_permit.length == 0
              ? ""
              : this.ruleForm.road_transport_permit[0].name;
          var record = [];
          if (this.ruleForm.audit_record.length == 0) {
            record = [];
          } else {
            for (var i = 0; i < this.ruleForm.audit_record.length; i++) {
              record.push(String(this.ruleForm.audit_record[i].name));
            }
          }
          var report = [];

          if (this.ruleForm.audit_report.length == 0) {
            report = [];
          } else {
            for (var i = 0; i < this.ruleForm.audit_report.length; i++) {
              report.push(String(this.ruleForm.audit_report[i].name));
            }
          }
          // 从新定义一个变量当当回显的上传列表数据为空的时候上传的是fileuidList否则的话
          var parme = {
            id: this.consignerID,
            name: this.ruleForm.name,
            contact_name: this.ruleForm.contact_name,
            contact_mobile: this.ruleForm.contact_mobile,
            contact_phone: this.ruleForm.contact_phone,
            coding: this.ruleForm.coding,
            business_license: String(license),
            road_transport_permit: String(permit),
            audit_report: report,
            audit_record: record,
            province_id: this.ruleForm.setUPvalue[0],
            city_id: this.ruleForm.setUPvalue[1],
            district_id: this.ruleForm.setUPvalue[2],
            carrier_type: this.ruleForm.carrier_type,
            address: this.ruleForm.address,
            branch_id: this.ruleForm.branch_id,
            remark: this.ruleForm.remark, //描述信息
          };
          EditAccept(parme).then((res) => {
            if (res.code == 10000) {
              this.$message({
                message: "编辑成功",
                type: "success",
              });
              this.closepop();
              // 刷新界面
              this.PageAcceptlist();
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取多选删除的id号
    handleSelectionChange(val) {
      var deleid = [];
      for (var i = 0; i < val.length; i++) {
        deleid.push(val[i].id);
      }
      this.deletparam.id = deleid;
    },
    // 删除承运方
    PagedeleteAccept() {
      var str = JSON.stringify(this.deletparam);
      deleteAccept(str).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        // 关闭页面
        this.closepop();
        // 刷新界面
        this.PageAcceptlist();
      });
    },
    //修改
    handleClick(row, type) {
      if (row == undefined) {
        this.title_name = "创建承运商";
        this.orderstate = "0";
        this.openpop();
        this.Empty_data();
      } else if (row != "" && type == 1) {
        this.title_name = "查看承运商";
        this.orderstate = "";
        this.openpop();
        this.PageDetailsshipping(row.id);
      } else if (row != "" && type == 2) {
        this.title_name = "修改承运商";
        this.orderstate = "2";
        this.consignerID = row.id;
        this.openpop();
        this.PageDetailsshipping(row.id);
      }
    },
    // 承运方详情详情
    PageDetailsshipping(id) {
      var params = {
        id: id,
      };
      DetailsAccept(params).then((res) => {
        var res = res.data;
        var license = [];
        if (res.business_license == "") {
          license = [];
        } else {
          license.push({ name: [res.business_license] });
        }
        var permit = [];
        if (res.road_transport_permit == "") {
          permit = [];
        } else {
          permit.push({ name: [res.road_transport_permit] });
        }
        var record = [];
        if (res.audit_record == null) {
          record = [];
        } else {
          for (var i = 0; i < res.audit_record.length; i++) {
            record.push({ name: [res.audit_record[i]] });
          }
        }
        var report = [];
        if (res.audit_report == null) {
          report = [];
        } else {
          for (var i = 0; i < res.audit_report.length; i++) {
            report.push({ name: [res.audit_report[i]] });
          }
        }
        this.ruleForm.name = res.name;
        this.ruleForm.setUPvalue = [
          res.province_id,
          res.city_id,
          res.district_id,
        ]; //地址
        // 组织
        var branchList = [];
        res.branch_info.forEach((res) => {
          branchList.push(res.branch_id);
        });

        this.ruleForm.contact_name = res.mobile; //负责人姓名
        this.ruleForm.contact_mobile = res.contact_mobile; //负责人手机
        this.ruleForm.contact_phone = res.contact_phone; //公司电话电话
        this.ruleForm.coding = res.coding; //承运商编码  必传
        this.ruleForm.business_license = license; //营业执照
        this.ruleForm.road_transport_permit = permit; //道路运输许可证
        this.ruleForm.audit_report = report; //审计报告
        this.ruleForm.audit_record = record; //审计记录表
        this.ruleForm.carrier_type = res.carrier_type; //类型：0自营，1其他    必传
        this.ruleForm.address = res.address; //详细地址
        this.ruleForm.branch_id = branchList; //网点id ，类型为自营时 必填
        this.ruleForm.remark = res.remark; //描述信息
      });
    },
    // 上传到oss上
    handleChange(file, fileList, type) {
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((result) => {
        var resname = result.name;
        var resType = resname.split("/")[0];
        var filehttp = "http://oss.dushisc.com/";
        switch (resType) {
          case "0":
            this.ruleForm.business_license.push({
              name: filehttp + result.name,
            });
            break;
          case "1":
            this.ruleForm.road_transport_permit.push({
              name: filehttp + result.name,
            });
            break;
          case "2":
            this.ruleForm.audit_record.push({ name: filehttp + result.name });
            break;
          case "3":
            this.ruleForm.audit_report.push({ name: filehttp + result.name });
            break;
        }
      });
    },
    // 点击取消
    cancledata() {
      // 清空数据
      this.Empty_data();
      this.closepop();
    },
    // 关闭弹框的函数
    closepop() {
      // this.dialogVisible = false;
      this.$emit("close");
    },
    openpop() {
      this.dialogVisible = true;
    },

    // 删除调用
    removeChange(file, fileList, type) {
      switch (type) {
        case 0:
          if (this.ruleForm.business_license.length > 0) {
            for (var i = 0; i < this.ruleForm.business_license.length; i++) {
              if (this.ruleForm.business_license[i].uid == file.uid) {
                this.ruleForm.business_license.splice(i, 1);
              }
            }
          }
          break;
        case 1:
          if (this.ruleForm.road_transport_permit.length > 0) {
            for (
              var i = 0;
              i < this.ruleForm.road_transport_permit.length;
              i++
            ) {
              if (this.ruleForm.road_transport_permit[i].uid == file.uid) {
                this.ruleForm.road_transport_permit.splice(i, 1);
              }
            }
          }
          break;
        case 2:
          if (this.ruleForm.audit_record.length > 0) {
            for (var i = 0; i < this.ruleForm.audit_record.length; i++) {
              if (this.ruleForm.audit_record[i].uid == file.uid) {
                this.ruleForm.audit_record.splice(i, 1);
              }
            }
          }
          break;
        case 3:
          if (this.ruleForm.audit_report.length > 0) {
            for (var i = 0; i < this.ruleForm.audit_report.length; i++) {
              if (this.ruleForm.audit_report[i].uid == file.uid) {
                this.ruleForm.audit_report.splice(i, 1);
              }
            }
          }
          break;
      }
    },
    // 清空数据
    Empty_data() {
      this.ruleForm = {
        name: "", // 名称 必传
        contact_name: "", //负责人姓名
        contact_mobile: "", //负责人手机
        contact_phone: "", //公司电话电话
        coding: "", //承运商编码  必传
        business_license: [], //营业执照
        road_transport_permit: [], //道路运输许可证
        audit_report: [], //审计报告
        audit_record: [], //审计记录表
        setUPvalue: [], //地址
        carrier_type: "0", //类型：0自营，1其他    必传
        address: "", //详细地址
        branch_id: "", //网点id ，类型为自营时 必填
        remark: "", //描述信息
      };
    },
    // 重置数据
    resetquery() {
      // 查询数据清除
      this.inputname = "";
      this.queryvalue = [];
      this.detailvalue = "";
      this.PageAcceptlist();
    },
  },
};
</script>

<style lang="less" scoped>
.shareContainer {
  padding: 10px;
  // margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;

  .shareheader {
    margin: 0 auto;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
    }
  }

  // 内容
  .sharecontent {
    margin: 0 auto;
    background: white;

    // 头部内容
    .sharecontent_header {
      .sharecontent_header_right {
        display: inline-block;
      }

      .sharecontent_header_left {
        float: right;
        padding: 0px 10px 0px 0px;
      }
    }

    // 表单内容
    .sharecontent_content {
    }
  }
}
</style>
